<template>
    <div class="box">
        <div>
            <div><span>商品列表</span></div>
            <div style="margin-top: 20px">
                <el-button @click="toggleSelection([...tableData])">
                    全选
                </el-button>
                <el-button @click="toggleSelection()">加入购物车</el-button>
            </div>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="图片" width="120">
                    <template slot-scope="scope">
                        <img
                            :src="`${scope.row.date}`"
                            alt=""
                            style="width: 50px"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="商品名称"
                    width="120"
                ></el-table-column>
                <el-table-column
                    prop="price"
                    label="单价"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="number"
                    label="数量"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <div class="numberBtn">
                            <button class="btn" @click="numberDel(scope.row)">
                                -
                            </button>
                            <p class="numberP">
                                {{ scope.row.number }}
                            </p>
                            <button class="btn" @click="numberAdd(scope.row)">
                                +
                            </button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="stock"
                    label="库存"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="ctrl" label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <button @click="add(scope.row)">加入购物车</button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <div><span>购物车</span></div>
            <el-table
                ref="multipleTable"
                :data="shoppingTableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="图片" width="120">
                    <template slot-scope="scope">
                        <img
                            :src="`${scope.row.date}`"
                            alt=""
                            style="width: 50px"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="商品名称"
                    width="120"
                ></el-table-column>
                <el-table-column
                    prop="price"
                    label="单价"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="number"
                    label="数量"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <div class="numberBtn">
                            <button
                                class="btn"
                                @click="shoppingnumberDel(scope.row)"
                            >
                                -
                            </button>
                            <p class="numberP">
                                {{ scope.row.number }}
                            </p>
                            <button
                                class="btn"
                                @click="shoppingnumberAdd(scope.row)"
                            >
                                +
                            </button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="subtotal"
                    label="小计"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <p>{{ scope.row.price * scope.row.number }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="ctrl" label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <button @click="del(scope.row)">删除</button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <div>总价</div>
                <div>{{ this.numberAll }}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    date: "http://t14.baidu.com/it/u=1592301874,3216261979&fm=224&app=112&f=JPEG?w=500&h=500",
                    name: "王小卤鸡爪(香辣味)",
                    price: 12,
                    number: 0,
                    subtotal: 12,
                    stock: 12,
                },
                {
                    id: 2,
                    date: "http://t14.baidu.com/it/u=1592301874,3216261979&fm=224&app=112&f=JPEG?w=500&h=500",
                    name: "王小卤鸡爪（麻辣味）",
                    price: 12,
                    number: 0,
                    subtotal: 12,
                    stock: 22,
                },
            ],
            multipleSelection: [],
            shoppingTableData: [
                {
                    id: 3,
                    date: "http://t14.baidu.com/it/u=1592301874,3216261979&fm=224&app=112&f=JPEG?w=500&h=500",
                    name: "王小卤鸡爪",
                    price: 12,
                    number: 1,
                    subtotal: 12,
                },
            ],
        };
    },
    computed: {
        numberAll() {
            let numberAll = 0;
            for (let i = 0; i < this.shoppingTableData.length; i++) {
                numberAll +=
                    this.shoppingTableData[i].number *
                    this.shoppingTableData[i].price;
            }
            return numberAll;
        },
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        numberDel(row) {
            if (row.number > 0) {
                --row.number;
                ++row.stock;
            }
        },
        numberAdd(row) {
            if (row.stock > 0) {
                ++row.number;
                --row.stock;
            }
        },
        shoppingnumberDel(row) {
            if (row.number > 1) {
                --row.number;
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].id === row.id) {
                        ++this.tableData[i].stock;
                    }
                }
            }
        },
        shoppingnumberAdd(row) {
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id === row.id) {
                    if (this.tableData[i] > 0) {
                        ++row.number;
                        --this.tableData[i].stock;
                    }
                }
            }
        },
        add(row) {
            console.log(row);
            let rows = { ...row };
            let isrows = true;
            for (let i = 0; i < this.shoppingTableData.length; i++) {
                if (this.shoppingTableData[i].id === rows.id) {
                    this.shoppingTableData[i].number += rows.number;
                    rows.stock = rows.stock - 2;
                    isrows = false;
                }
            }
            if (isrows) {
                if (rows.number !== 0) {
                    this.shoppingTableData.push(rows);
                }
            }
        },
        del(rows) {
            console.log(rows);
            // splice
            let shoppingTableDel = [];
            for (let i = 0; i < this.shoppingTableData.length; i++) {
                if (this.shoppingTableData[i].id === rows.id) {
                    shoppingTableDel = this.shoppingTableData.splice(i, 1);
                }
            }
            console.log(this.shoppingTableData, shoppingTableDel);
            if (shoppingTableDel.length !== 0) {
                for (let i = 0; i < this.tableData.length; i++) {
                    for (let j = 0; j < shoppingTableDel.length; j++) {
                        if (this.tableData[i].id === shoppingTableDel[j].id) {
                            this.tableData[i].stock +=
                                shoppingTableDel[j].number;
                        }
                    }
                }
            }
        },
    },
};
</script>
<style>
.btn {
    width: 20px;
    height: 20px;
}
.numberBtn {
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.numberP {
    width: 50px;
    text-align: center;
}
</style>
